<template>
  <div
    :style="{ width: props.width, height: props.height }"
    class="text-center flex justify-center items-end text-[#33cdfa] bg-[#0a1446] shine"
  >
    <div
      class="flex flex-col justify-center text-[23px] text-center w-[25%] h-[80%] clips_left bg-[#100c2a]"
    >
      <div>XINDECO</div>
    </div>
    <div
      class="h-[100%] leading-loose tracking-wider text-[40px] font-bold w-[50%]"
    >
      {{ states.title }}

      <div class="loader"></div>
    </div>
    <div
      class="flex flex-col justify-center w-[25%] h-[80%] clips_right bg-[#100c2a]"
    >
      <!-- <span>当前时间：{{ states.curretTime }}</span> -->
      <span>当前时间：{{ nowTime }}</span>
      <span class="text-white">摆渡起始时间:{{ states.startTime }}</span>
      <!-- 2024-5-6 17：26：30 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "30px",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});

const states = computed({
  get: () => props.models,
});
let timer = ref(null);
let nowTime = ref(getCurrentTime());
onMounted(() => {
  timer.value = setInterval(() => {
    nowTime.value = getCurrentTime();
  }, 1000);
});
onUnmounted(() => {
  clearInterval(timer.value);
  timer.value = null;
});
function getCurrentTime() {
  var currentDate = new Date();
  var year = currentDate.getFullYear();
  var month = (currentDate.getMonth() + 1).toString().padStart(2, "0");
  var day = currentDate.getDate().toString().padStart(2, "0");
  var hour = currentDate.getHours().toString().padStart(2, "0");
  var minutes = currentDate.getMinutes().toString().padStart(2, "0");
  var seconds = currentDate.getSeconds().toString().padStart(2, "0");

  return (
    year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds
  );
}
</script>

<style scoped lang="scss">
.shine {
  box-shadow: 0 7px 5px -5px #333;
  position: relative;
}

.clips_left {
  border-top: 1px solid #33cdfa;

  clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
}

.clips_right {
  border-top: 1px solid #33cdfa;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

@keyframes l2 {
  to {
    background-size: 100% 3px;
  }
}

/* HTML: <div class="loader"></div> */
.loader {
  height: 6px;
  width: 60%;
  display: inline-grid;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.loader:before,
.loader:after {
  content: " ";
  background: #33cdfa;
  grid-area: 1/1;
  clip-path: inset(0 -200% 50%);
  text-shadow: -10ch 0 0;
  animation: l12 3s infinite;
}
.loader:after {
  clip-path: inset(50% -200% 0%);
  text-shadow: 10ch 0 0;
  --s: -1;
}
@keyframes l12 {
  50%,
  100% {
    transform: translateX(calc(var(--s, 1) * 100%));
  }
}
</style>
